<template>
  <div class="tab2">
    <ul>
      <li  v-for="(item,index) in tab2list" :key="index" @click="idFn(item.movieid)">
        <div class="imgleft"><img :src="item.img.replace(/\/w.h/, '/75.100')" alt=""></div>
        <div class="middle">
          <h2>
            {{item.nm}}
            <em v-if="item.version=='v3d imax'" class="em3d"></em>
          <em v-if="item.version=='v2d imax'" class="em2d"></em>
          </h2>
          <span v-if="!item.sc==0">观众评: <i>{{item.sc}}</i> </span>
          <span v-else><i>{{item.wish}} </i> 人想看</span>
          <p>主演:{{item.star}}</p>
          <i>{{item.showInfo}}</i>
         
        </div>
        <button v-if="!item.sc==0" >购票</button>
        <button v-else :style="{backgroundColor:'skyblue'}">预售</button>
      </li>
      <p v-if="tab2list.length===33">拉到底了...</p>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  props: ["num"],
  created() {
    this.getTab2DataAsc().then(() => {
      this.$emit("addbs");
    });
  },
  watch: {
    num() {
      if (this.moreList) {
        this.getmoreAsc(this.moreList).then(() => {
          this.$emit("refresh");
        });
      }
    }
  },
  // computed: mapState(["tab2list", "ids", "moreList"]),
  computed: mapState({
    tab2list: state => state.index.tab2list,
    moreList: state => state.index.moreList
  }),

  methods: {
    ...mapActions(["getTab2DataAsc", "getmoreAsc"]),
    idFn(id) {
      this.$router.push("/detail/" + id);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.tab2 {
  background-color: #fff;
  ul {
    font-size: @m-size;
    li {
      position: relative;
      display: flex;
      padding: 10px;
      border-bottom: 1px solid @border-color;
      height: 120px;

      .imgleft {
        img {
          width: 75px;
          height: 100px;
        }
      }
      .middle {
        text-align: left;
        margin-left: 10px;
        h2 {
          font-size: @xl-size;
          margin-bottom: 10px;
          width: 210px;
          .ellipsis();

          .em3d,
          .em2d {
            display: inline-block;
            margin-left: 20px;
            width: 50px;
            height: 17px;
            background: url("../../assets/img/3d.png") no-repeat;
            background-size: 50px;
          }
          .em2d {
            background: url("../../assets/img/2d.png") no-repeat;
            background-size: 50px;
          }
        }
        span {
          i {
            color: #faaf00;
            font-weight: 600;
            font-size: @xl-size;
          }
        }
        p {
          margin: 5px 0;
          width: 200px;
          .ellipsis();
        }
      }
      button {
        position: absolute;
        width: 50px;
        height: 30px;
        background-color: #f03d37;
        border: 0;
        border-radius: 5px;
        color: #fff;
        right: 20px;
        top: 40px;
        font-size: @s-size;
      }
    }
  }
}
</style>
